<template>
  <div>
    <!-- 工具弹窗 -->
    <div class="tool_xq_wrap" v-if="drawer5">
      <div class="tool_xq_wrap_close">
        <i class="el-icon-circle-close" @click="toolClose()"></i>
      </div>
      <div class="tool_xq_wrap_text">
        <i
          class="el-icon-crop tool_xq_wrap_text_icon"
          @click="toolSelectArea()"
        ></i>
        <div class="tool_xq_wrap_text_p">地图选区</div>
      </div>
    </div>
    <!-- 工具弹框-btn -->
    <div class="tool_btn_b" v-if="drawer6">
      <div class="gis_btn_drawer_wrap">
        <el-row :gutter="20">
          <el-col :span="24">
            <!-- 按钮 -->
            <el-row type="flex" :gutter="10">
              <el-col :span="12">
                <el-row :gutter="10">
                  <el-col
                    :span="item.span"
                    v-for="(item, index) in btnList"
                    :key="index"
                  >
                    <el-button
                      size="small"
                      class="btnClass"
                      @click="btnTabChange(item, index)"
                      :class="btnTab == index ? 'highJ' : ''"
                      >{{ item.name }}</el-button
                    >
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <div class="btnClass-r-w">
                  <div style="flex: 1; display: flex">
                    <div class="btnClass-r-w-flex" @click="forbiddenTone()">
                      <div>
                        <i
                          class="btnClass-font-30"
                          :class="
                            IsForbiddenTone
                              ? 'el-icon-turn-off-microphone red'
                              : 'el-icon-microphone gray'
                          "
                        ></i>
                      </div>
                      <div class="btnClass-text">
                        {{ IsForbiddenTone ? "解除静音" : "静音" }}
                      </div>
                    </div>
                    <div class="btnClass-transcribe">
                      <div style="display: flex; align-items: center">
                        <div @click="transcribe()" style="width: 70px">
                          <div>
                            <i
                              class="btnClass-font-30"
                              :class="
                                IsTranscribe
                                  ? 'el-icon-video-play red'
                                  : 'el-icon-video-play gray'
                              "
                            ></i>
                          </div>
                          <div class="btnClass-text">
                            {{ IsTranscribe ? "停止录制" : "录制" }}
                          </div>
                        </div>
                        <div style="margin-left: 0px">
                          <el-popover placement="top" trigger="click">
                            <ul class="lzUl">
                              <li @click="lzUlCheck(1)">
                                <span>仅主持人可录制</span
                                ><i
                                  :class="lzCheck == 1 ? 'el-icon-check' : ''"
                                ></i>
                              </li>
                              <li @click="lzUlCheck(2)">
                                <span>全体成员可录制</span
                                ><i
                                  :class="lzCheck == 2 ? 'el-icon-check' : ''"
                                ></i>
                              </li>
                              <li @click="lzUlCheck(3)">
                                <span>允许部分成员录制</span
                                ><i
                                  :class="lzCheck == 3 ? 'el-icon-check' : ''"
                                ></i>
                              </li>
                            </ul>
                            <i slot="reference" class="el-icon-arrow-up"></i>
                          </el-popover>
                        </div>
                      </div>
                    </div>
                    <div class="btnClass-closeVideo" @click="closeVideo()">
                      <div>
                        <i
                          class="btnClass-font-30"
                          :class="
                            IsCloseVideo
                              ? 'el-icon-video-camera red'
                              : 'el-icon-video-camera gray'
                          "
                        ></i>
                      </div>
                      <div class="btnClass-text">
                        {{ IsCloseVideo ? "打开视频" : "关闭视频" }}
                      </div>
                    </div>
                    <div class="btnClass-screenSharing">
                      <div style="display: flex; align-items: center">
                        <div @click="screenSharing()">
                          <div>
                            <i
                              class="btnClass-font-30"
                              :class="
                                IsScreenSharing
                                  ? 'el-icon-odometer red'
                                  : 'el-icon-odometer gray'
                              "
                            ></i>
                          </div>
                          <div class="btnClass-text">
                            {{ IsTranscribe ? "屏幕共享" : "屏幕共享" }}
                          </div>
                        </div>
                        <div style="margin-left: 0px">
                          <el-popover placement="top" trigger="click">
                            <ul class="lzUl">
                              <li @click="pmgxUlCheck(1)">
                                <span>允许部分成员共享</span
                                ><i
                                  :class="pmgxCheck == 1 ? 'el-icon-check' : ''"
                                ></i>
                              </li>
                            </ul>
                            <i slot="reference" class="el-icon-arrow-up"></i>
                          </el-popover>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="btnClass-concludeMeeting"
                    @click="concludeMeeting()"
                  >
                    <div>
                      <i class="el-icon-switch-button red btnClass-font-30"></i>
                    </div>
                    <div class="btnClass-text">结束会议</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 工具弹框-右边列表信息 -->
    <div class="tool_btn_l" v-if="drawer6">
      <div class="gis_btn_drawer_wrap">
        <!-- 内容 -->
        <el-row :gutter="20" type="flex" class="tool_btn_l_row">
          <!-- 右边 -->
          <el-col :span="24" class="tool_btn_l_col">
            <el-card class="box-card">
              <div>
                <span class="r-t-title">呼叫列队</span>
              </div>
              <div class="r-t-ul">
                <div class="r-t-li" v-for="(item, index) in 2" :key="index">
                  <div class="r-t-li-flex">
                    <div class="r-t-li-flex-relative">
                      <div class="r-t-li-flex-dot"></div>
                      <el-avatar
                        size="medium"
                        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                      ></el-avatar>
                    </div>
                    <div class="r-t-li-flex-c">
                      <div class="r-t-li-flex-c-name">安全巡视组-潘夏彤</div>
                      <div class="r-t-li-flex-c-desc">
                        <span>2024年3月20日</span><span>等待60秒</span>
                      </div>
                    </div>
                    <div>
                      <i
                        class="el-icon-video-camera r-t-li-flex-c-ico-video"
                        @click="rightVideo(item)"
                      ></i>
                      <i
                        class="el-icon-phone r-t-li-flex-c-ico-conclude"
                        @click="rightConclude(item)"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div style="height: 32px">
                <el-button type="text" style="margin-right: 10px" @click="requiedPM()">请求共享屏幕</el-button>
                <el-button type="text" @click="rightTuneOut()">禁止收听</el-button>
              </div> -->
            </el-card>
          </el-col>
          <el-col :span="24" class="tool_btn_l_col">
            <el-card class="box-card">
              <div class="r-c-t-w">
                <span class="r-c-t-w-dot"></span>
                <span class="r-c-t-w-title">呼叫中</span>
              </div>
              <div class="r-c-w-h">
                <div class="r-c-w-h-box">
                  <div class="r-c-w-h-w">
                    <span>安全巡视组-潘夏彤</span>
                    <span class="r-c-w-h-w-txt"
                      >挂断<i
                        class="el-icon-phone r-c-w-h-w-i"
                        @click="rightConcludeTeam()"
                      ></i
                    ></span>
                  </div>
                  <div class="r-c-img-w">
                    <div
                      class="r-c-img-w-li"
                      v-for="(item, index) in 7"
                      :key="index"
                    >
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar
                              size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            ></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="24" class="tool_btn_l_col">
            <el-card class="box-card">
              <div class="r-c-t-w">
                <span class="r-c-t-w-dot yellow-bg"></span>
                <span class="r-c-t-w-title">未入会</span>
              </div>
              <div class="r-c-w-h">
                <div class="r-c-w-h-box">
                  <div class="r-c-w-h-w">
                    <span>安全巡视组-潘夏彤</span>
                    <span class="r-c-w-h-w-txt"
                      >重新呼叫<i
                        class="el-icon-video-camera r-c-w-h-w-i blue-bg"
                        @click="rightRestCallTeam()"
                      ></i
                    ></span>
                  </div>
                  <div class="r-c-img-w">
                    <div
                      class="r-c-img-w-li"
                      v-for="(item, index) in 7"
                      :key="index"
                    >
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar
                              size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            ></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 视频调度（邀请入会）弹窗 -->
    <el-drawer :visible.sync="drawer" :with-header="false" direction="ltr">
      <div class="drawer-w">
        <el-tabs v-model="activeName1" @tab-click="handleClickTab">
          <el-tab-pane label="资源汇总" name="b0">
            <div class="drawer-block-h">
              <el-row
                class="zytab"
                v-for="(item, index) in zylist"
                :key="index"
              >
                <el-col :span="24" class="m_b">
                  <el-row>
                    <el-col :span="20">
                      <i
                        class="el-icon-video-camera"
                        style="margin-right: 5px"
                      ></i
                      >{{ item.title }}
                    </el-col>
                    <el-col :span="4" v-if="item.type == 2"
                      ><el-button type="text" class="zy_qunhu"
                        >群呼</el-button
                      ></el-col
                    >
                  </el-row>
                </el-col>
                <el-col
                  :span="23"
                  :offset="1"
                  v-for="(itm, inx) in item.list"
                  :key="inx"
                  class="m_b"
                >
                  <el-row>
                    <el-col :span="20"
                      ><el-checkbox>0600000001</el-checkbox></el-col
                    >
                    <el-col :span="4">
                      <i
                        class="el-icon-video-play text-blue-color zy_icon"
                        v-if="item.type == 1"
                      ></i>
                      <i
                        class="el-icon-phone text-blue-color zy_icon"
                        v-if="item.type == 2"
                      ></i>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="设配列表" name="b1">
            <div class="drawer-block-h">
              <el-tree
                :data="treedata"
                show-checkbox
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                class="treeDataClass"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="display: inline-block; width: 180px">{{
                    node.label
                  }}</span>
                  <span>
                    <el-button type="text" size="mini">
                      武汉市江汉区XX街道
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class="videoClass"
                      @click="facilityVideo(data)"
                    >
                      <i class="el-icon-video-play"></i>
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="通讯录" name="b2">
            <div class="drawer-block-h">
              <el-tree
                :data="treedata"
                show-checkbox
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                class="treeDataClass"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span style="display: inline-block; width: 180px">{{
                    node.label
                  }}</span>
                  <span>
                    <el-button
                      type="text"
                      size="mini"
                      class="videoClass"
                      @click="teamCall(data)"
                    >
                      <i class="el-icon-user-solid"></i>
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class="videoClass"
                      @click="turnOffCall(data)"
                    >
                      <i class="el-icon-turn-off-microphone"></i>
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class="videoClass"
                      @click="aloneCall(data)"
                    >
                      <i class="el-icon-phone red"></i>
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </el-tab-pane>
          <el-tab-pane label="群组" name="b3">
            <div class="drawer-block-h"></div>
          </el-tab-pane>
        </el-tabs>
        <div class="fixedBtm">
          <el-row type="flex">
            <el-col :span="24" class="text-center">
              <el-button
                type="primary"
                round
                size="small"
                class="fixedBtm-btn-150"
                @click="startMeeting()"
                >开始会议</el-button
              >
            </el-col>
            <!-- <el-col :span="12" class="text-center">
              <el-button type="danger" round plain size="small" class="fixedBtm-btn-150 fixedBtm-btn"
                @click="clearCheck()">清除已选择</el-button>
            </el-col> -->
          </el-row>
        </div>
      </div>
    </el-drawer>
    <!-- 轮流入会 弹窗 -->
    <el-drawer :visible.sync="drawer1" :with-header="false" direction="rtl">
      <div class="drawer-w">
        <el-tabs v-model="activeName2" @tab-click="handleClickTab2">
          <el-tab-pane label="会议中" name="c1">
            <div class="drawer-block-h">
              <el-row>
                <el-col :span="24" v-for="i in 5" :key="i">
                  <div>技术支持</div>
                  <div class="flex-wrap">
                    <div
                      class="flex-16"
                      v-for="(item, index) in 7"
                      :key="index"
                    >
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar
                              size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            ></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="drawer-w-flex-addWait"></div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="等待中" name="c2">
            <div class="drawer-block-h">
              <el-row>
                <el-col :span="24" v-for="i in 5" :key="i">
                  <div>技术支持</div>
                  <div class="r-c-w-h-w-txt">
                    计划入会时间: 2024-03 26 14:00~2024-03 26 14:20
                  </div>
                  <div class="flex-wrap">
                    <div
                      class="flex-16"
                      v-for="(item, index) in 7"
                      :key="index"
                    >
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar
                              size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            ></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="drawer-w-flex-addWait">
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="addWait()"
                      >增加</el-button
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已结束" name="c3">
            <div class="drawer-block-h">
              <el-row>
                <el-col :span="24" v-for="i in 5" :key="i">
                  <div>安全巡视组（6）</div>
                  <div class="r-c-w-h-w-txt">
                    计划入会时间: 2024-03 26 14:00~2024-03 26 14:20
                  </div>
                  <div class="flex-wrap">
                    <div
                      class="flex-16"
                      v-for="(item, index) in 7"
                      :key="index"
                    >
                      <div class="r-c-img-w-li-flex">
                        <div class="r-c-img-w-li-flex-c">
                          <div class="r-c-img-w-li-flex-c-posi">
                            <div class="r-t-li-flex-dot"></div>
                            <div class="r-c-img-w-li-flex-c-checkbox">
                              <el-checkbox size="mini"></el-checkbox>
                            </div>
                            <el-avatar
                              size="medium"
                              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            ></el-avatar>
                          </div>
                          <div class="r-c-img-w-li-flex-c-txt">夏彤</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="drawer-w-flex-addWait"></div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="fixedBtm">
          <el-row type="flex">
            <el-col :span="12" class="text-center">
              <el-button
                :type="activeName2 != 'c1' ? 'primary' : 'danger'"
                round
                size="small"
                class="fixedBtm-btn-150"
                @click="hangupDrawer1()"
                >{{
                  activeName2 == "c1"
                    ? "挂断"
                    : activeName2 == "c2"
                    ? "呼叫"
                    : "重新呼叫"
                }}</el-button
              >
            </el-col>
            <el-col :span="12" class="text-center">
              <el-button
                type="danger"
                round
                size="small"
                class="fixedBtm-btn-150 fixedBtm-btn"
                @click="clearCheckDrawer1()"
                >清除已选择</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>



<script>
const treedataSource = [
  {
    id: 1,
    label: "一级 1",
    children: [
      {
        id: 4,
        label: "二级 1-1",
        children: [
          {
            id: 9,
            label: "三级 1-1-1",
          },
          {
            id: 10,
            label: "三级 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "一级 2",
    children: [
      {
        id: 5,
        label: "二级 2-1",
      },
      {
        id: 6,
        label: "二级 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "一级 3",
    children: [
      {
        id: 7,
        label: "二级 3-1",
      },
      {
        id: 8,
        label: "二级 3-2",
      },
    ],
  },
];
export default {
  data() {
    return {
      activeName: "a1", //tab选中
      blockSpan: 8, //span值
      viewsTab: 0, //视图模式切换
      hmTab: 0, //画面显示切换
      btnTab: 0, //左下角按钮切换
      btnList: [
        { name: "视频调度（邀请入会）", value: 0, span: 16 },
        { name: "关闭全部", value: 1, span: 8 },
        { name: "对话模式", value: 2, span: 8 },
        { name: "向终端发送字幕", value: 3, span: 8 },
        { name: "轮流入会", value: 4, span: 8 },
        { name: "解除全体静音", value: 5, span: 8 },
        { name: "移出会议室", value: 6, span: 8 },
      ], //左下角按钮list
      IsForbiddenTone: false, //是否禁音
      IsTranscribe: false, //是否录制
      IsCloseVideo: false, //是否关闭视频
      IsScreenSharing: false, //是否屏幕共享
      IsConcludeMeeting: false, //是否结束会议
      lzCheck: null, //是否录制选中
      pmgxCheck: null, //屏幕共享选中
      drawer: false, //邀请入会弹窗
      activeName1: "b0", //邀请入会弹窗tab切换
      treedata: JSON.parse(JSON.stringify(treedataSource)),
      activeName2: "c1", //轮流入会弹窗tab切换
      drawer1: false, //轮流入会弹窗
      // 工具弹窗
      drawer5: false,
      zylist: [
        {
          title: "视频监控",
          type: 1,
          list: [
            { name: "a1", value: "1" },
            { name: "a2", value: "2" },
          ],
        },
        {
          title: "无人机",
          type: 1,
          list: [
            { name: "a1", value: "1" },
            { name: "a2", value: "2" },
          ],
        },
        {
          title: "单兵",
          type: 2,
          list: [
            { name: "a1", value: "1" },
            { name: "a2", value: "2" },
          ],
        },
      ], //资源汇总
      drawer6: false, //工具弹框-按钮组
    };
  },
  mounted() {},
  methods: {
    // 初始化
    init() {
      this.drawer5 = true;
    },
    /**tab切换
     *
     */
    handleClick(tab) {
      console.log(tab);
      this.activeName = tab.name;
    },
    /**左下角按钮切换事件
     * item 值
     * index 序号
     */
    btnTabChange(item, index) {
      this.btnTab = index;
      if (item.value == 0) {
        this.drawer = true;
      } else if (item.value == 4) {
        this.drawer1 = true;
      }
    },
    /**是否禁音 */
    forbiddenTone() {
      this.IsForbiddenTone = !this.IsForbiddenTone;
    },
    /**是否录制事件 */
    transcribe() {
      this.IsTranscribe = !this.IsTranscribe;
    },
    /**是否打开视频 */
    closeVideo() {
      this.IsCloseVideo = !this.IsCloseVideo;
    },
    /**屏幕共享 */
    screenSharing() {
      this.IsScreenSharing = !this.IsScreenSharing;
    },
    /**结束会议 */
    concludeMeeting() {},
    /**录制选中 */
    lzUlCheck(index) {
      this.lzCheck = index;
    },
    /**屏幕共享选中 */
    pmgxUlCheck(index) {
      this.pmgxCheck = index;
    },
    /**右上角视频事件 */
    rightVideo(item) {},
    /**右上角挂断事件 */
    rightConclude(item) {},
    /**右边请求屏幕共享 */
    requiedPM() {},
    /** 右边禁止收听*/
    rightTuneOut() {},
    /**右边组挂断 */
    rightConcludeTeam() {},
    /**重新呼叫 */
    rightRestCallTeam() {},
    /**投屏已选中的数据 */
    tpCheck() {
      this.drawer = false;
    },
    // 清除已选中的数据
    clearCheck() {},
    /**邀请入会弹窗tab切换 */
    handleClickTab(tab) {
      this.activeName1 = tab.name;
    },
    /**邀请入会弹框- 通讯录-群呼 */
    teamCall(item) {},
    /**邀请入会弹框- 通讯录-禁言*/
    turnOffCall(item) {},
    /** 邀请入会弹框- 通讯录-直呼*/
    aloneCall(item) {},
    /**邀请入会弹框- 设备列表-video */
    facilityVideo(item) {},
    /**轮流入会tab切换 */
    handleClickTab2(tab) {
      this.activeName2 = tab.name;
    },
    /**轮流入会弹窗 挂断*/
    hangupDrawer1() {
      this.drawer1 = false;
    },
    /**轮流入会弹窗 清除已选择事件 */
    clearCheckDrawer1() {},
    /**增加等待的人 */
    addWait() {},
    //工具弹框-close
    toolClose() {
      this.drawer5 = false;
      this.drawer = false;
    },
    //工具弹框-地图选区事件
    toolSelectArea() {
      this.drawer = true;
    },
    //工具弹框-地图选区-开始会议
    startMeeting() {
      this.drawer = false;
      this.drawer5 = false;
      this.drawer6 = true;
    },
    //弹窗都关闭
    closeDrawerAll() {
      this.drawer = false;
      this.drawer5 = false;
      this.drawer6 = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/emergency.scss";
</style>
<style lang="scss" scoped>
@import "../../../assets/emergency_gis.scss";
</style>